<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head id="public_head">
  <meta charset="UTF-8">
  <title>home</title>
  <link rel="stylesheet" th:href="@{/css/public.css}">
  <script th:src="@{/js/jquery-3.7.1.min.js}"></script>
  <script th:src="@{/js/public-js.js}"></script>
  <script src="https://cdn.staticfile.net/Chart.js/3.9.1/chart.js"></script>
  <style>
    html,body{
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      background-color: #f5f5f5;
    }
    .container{
      height: 100%;width: 100%;display: flex;flex-direction: column;
    }
    .header{
      height: 100px;width: 100%;display: flex;justify-content: space-between;align-items: center;
    }
    .header div:hover{
      cursor: pointer;
      background-color: darkseagreen;
    }
    .main{
      flex:1;background-color: #fff;display: flex;
    }
    .left{
      height: 100%;width: 140px;background-color:#909090;
    }
    .left ul{
      display: inline;
    }
    .left li{
      align-items: center;
      display: flex;
      height: 40px;
      justify-content: center;
    }
    #active{
      background-color: darkseagreen;
      border-radius: 4px;
    }
    .right{
      /*height: 97.3%;*/
      height: 645px;
      overflow: auto;
      flex: 1;padding: 10px;
    }
    .menu-item {
      cursor: pointer;
      text-align: center;
    }
    .menu-item a {
      text-decoration: none;color: black;font-size: large;
    }
    .menu-item:hover {
      background-color: darkseagreen;
      border-radius: 5px;
    }
    .menu-item.active {
      background-color: green;
      border-radius: 10px;
    }
    .item {
      display: none;
    }

    .item.active {
      display: block;
    }
    ul {list-style-type:none;}
    li {
      margin: 10px;
      font-size: 28px;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="header" id="public_header">
    <!--        <h1 style="margin-left: 20px">后台管理系统</h1>-->
    <h1 style="margin-left: 20px">* * * * *</h1>
    <div style="height: 100%;padding: 20px;display: flex;align-items: center;">
      <a href="#" style="text-decoration: none;color:black">[[${session.loginUser}]]</a>
      <div style="width: 2px;height: 20px;margin: 0 10px;background: black"></div>
      <a th:href="@{/logout}" style="text-decoration: none;color:black">退出登录</a>
    </div>
  </div>
  <div class="publicTime" id="public_time">
    <span id="time"></span>
    <a href="#" style="text-decoration: none;">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
    <!--    获取本地时间-->
    <script>
      window.onload = function () {
        var time = document.getElementById("time");
        setInterval(function () {
          var date = new Date();
          var year = date.getFullYear();
          var month = date.getMonth();
          var day = date.getDate();
          var hour = date.getHours();
          var minutes = date.getMinutes();
          var seconds = date.getSeconds();
          var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
          time.innerHTML = year + "年" + (month + 1) + "月" + day + "日" + " " + hour
                  + ":" + minutes + ":" + seconds + " " + week[date.getDay()];
        }, 1000)
      }
    </script>
  </div>
  <div class="main">
    <div class="left" id="public_left">
      <ul>
        <li th:id="${activeUri == 'home' ? 'active' : ''}" class="menu-item">
          <a th:href="@{/admin/home}" href="home.html">首页</a>
        </li>
        <li th:id="${activeUri == 'user' ? 'active':''}" class="menu-item">
          <a th:href="@{/admin/user}" href="user/list.html">用户管理</a>
        </li>
        <li th:id="${activeUri == 'article' ? 'active' : ''}" class="menu-item" >
          <a th:href="@{/admin/article}" href="article/list.html">文章管理</a>
        </li>
        <li th:id="${activeUri == 'category' ? 'active' : ''}" class="menu-item" >
          <a th:href="@{/admin/category}" href="category/list.html">分类管理</a>
        </li>
        <li th:id="${activeUri == 'chat' ? 'active' : ''}" class="menu-item" >
          <a th:href="@{/admin/chat}" href="chat/list.html">聊天管理</a>
        </li>
      </ul>
    </div>
    <div class="right"></div>
  </div>
  <form method="post" id="public_deleteForm">
    <input type="hidden" name="_method" value="delete">
    <div class="remove" id="removeProv">
      <div class="removerChid">
        <h2>提示</h2>
        <div class="removeMain">
          <p>你确定要删除吗？</p>
          <a href="#" id="yes">确定</a>
          <a href="#" id="no">取消</a>
        </div>
      </div>
    </div>
  </form>
  <form method="post" id="public_revokeForm">
    <input type="hidden" name="_method" value="delete">
    <div class="remove" id="revokeProv">
      <div class="removerChid">
        <h2>提示</h2>
        <div class="removeMain">
          <p>你确定要恢复吗？</p>
          <a href="#" id="yes1">确定</a>
          <a href="#" id="no1">取消</a>
        </div>
      </div>
    </div>
  </form>
  <div style="background-color: #1515;height: 100px" id="public_footer"></div>
</div>
</body>
</html>